<template>
  <el-container>
    <!-- 查询栏 -->
    <div
      style="background-color: #fff; margin: 10px 0 ;box-shadow: 10px 10px 18px 0 rgba(0,0,0,.12);border-radius:3px;width:100%;"
      class="record">
      <el-row style="margin: 1% auto;font-size:20px;text-align: center;">流转记录</el-row>
      <el-form :model="formData" ref="formData" :inline="true" style="margin: 1% auto; text-align:center">
        <el-row>
          <el-form-item label="权利人身份证号码" prop="obligeeIdCard">
            <el-input placeholder="请输入权利人身份证号码" v-model="formData.obligeeIdCard" clearable></el-input>
          </el-form-item>
          <el-form-item label="承租人身份证号码" prop="lesseeIdCard">
            <el-input placeholder="请输入承租人身份证号码" v-model="formData.lesseeIdCard" clearable></el-input>
          </el-form-item>
          <el-form-item label="流转编号" prop="circulationCode">
            <el-input placeholder="请输入流转编号" v-model="formData.circulationCode" clearable></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitProperForm('formData')">搜索</el-button>
            <el-button @click="resetProperForm('formData')">重置</el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </div>
    <el-card style="margin-top:10px">
      <el-main>
        <el-table style="width: 100%" :data="tableData.data">
          <el-table-column type="expand" width="15px">
            <template slot-scope="props">
              <!-- 展开行 -->
              <el-form label-position="left" inline class="demo-table-expand">
                <el-row :gutter="20">
                  <el-col :span="10">
                    <el-form-item label="权利人" prop="obligee">
                      <span>{{ props.row.obligee}}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="10">
                    <el-form-item label="权利人身份证号码" prop="obligeeIdCard">
                      <span>{{ props.row.obligeeIdCard}}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="10">
                    <el-form-item label="权利人电话" prop="obligeePhone">
                      <span>{{ props.row.obligeePhone}}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="10">
                    <el-form-item label="权利人地址" prop="obligeeAddress">
                      <span>{{ props.row.obligeeAddress}}</span>
                      <br><br>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="10">
                    <el-form-item label="承租人" prop="lessee">
                      <span>{{ props.row.lessee}}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="10">
                    <el-form-item label="承租人身份证号码" prop="lesseeIdCard">
                      <span>{{ props.row.lesseeIdCard}}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="10">
                    <el-form-item label="承租人电话" prop="lesseePhone">
                      <span>{{ props.row.lesseePhone}}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="10">
                    <el-form-item label="权利人地址" prop="lesseeAddress">
                      <span>{{ props.row.lesseeAddress}}</span>
                      <br><br>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="10">
                    <el-form-item label="流转编号" prop="circulationCode">
                      <span>{{ props.row.circulationCode}}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="10">
                    <el-form-item label="合同编号" prop="contractCode">
                      <span>{{ props.row.contractCode}}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="10">
                    <el-form-item label="流转面积(㎡)" prop="circulationArea">
                      <span>{{ props.row.circulationArea}}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="10">
                    <el-form-item label="流转价格" prop="circulationPrice">
                      <span>{{ props.row.circulationPrice}}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="10">
                    <el-form-item label="现状描述" prop="currentSituationDescription">
                      <span>{{ props.row.currentSituationDescription}}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="10">
                    <el-form-item label="房屋结构" prop="housingStructure">
                      <span>{{ props.row.housingStructure}}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="10">
                    <el-form-item label="流转方式" prop="circulationMode">
                      <span>{{ props.row.circulationMode}}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="10">
                    <el-form-item label="流转期限" prop="circulationPeriod">
                      <span>{{ props.row.circulationPeriod}}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="10">
                    <el-form-item label="组织名称" prop="organizationName">
                      <span>{{ props.row.organizationName}}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="10">
                    <el-form-item label="信用代码" prop="creditCode">
                      <span>{{ props.row.creditCode}}</span>
                      <br><br>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="20">
                    <el-form-item label="备注" prop="common">
                      <span>{{ props.row.common}}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column prop="obligee" label="权利人" align="center"></el-table-column>
          <el-table-column prop="createTime" label="申请时间" align="center" :formatter="timeFormart"></el-table-column>
          <el-table-column prop="ownership" label="权属" align="center" :formatter="ownershipFormart"></el-table-column>
          <el-table-column prop="circulationType" label="流转类型" align="center" :formatter="registrationTypeFormart">
          </el-table-column>
          <el-table-column prop="state" label="审核状态" align="center" :formatter="stateFormart"></el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="showData(scope.$index, scope.row)">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
      <div class="block">
        <el-pagination @size-change="changePageSize" @current-change="changeCurrentPage" @prev-click="prevPage"
          @next-click="nextPage" :current-page="tableData.currentPage" :page-sizes="[5, 10, 15, 20,25,30,35,40]"
          :page-size="tableData.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="tableData.total">
        </el-pagination>
      </div>
    </el-card>
    <el-footer>
    </el-footer>

  </el-container>


</template>
<script>
  import {
    getPropertyreExitStateApi,
    selectLikeProperStateApi
  } from "@/api/propertyreApi";
  import store from "@/vuex/store";
  export default {
    data() {
      return {
        editVisible: false,
        bohuiVisible: false,
        tableData: {
          //表格数据
          data: [{
            id: "",
            obligee: "", //权利人
            ownership: "", //权属
            createTime: "", //创建日期
            updateTime: "", //修改日期
            circulationType: "", //流转类型
            state: "", //审核状态
            circulationCode: "", //流转编号
            organizationName: "", //组织名称
            obligeeIdCard: "", //权利人身份证号码
            obligeePhone: "", //权利人电话
            obligeeAddress: "", //权利人地址
            common: "", //备注
            contractCode: "", //合同编号
            lessee: "", //承租人
            lesseeIdCard: "", //承租人身份证号码
            lesseePhone: "", //承租人电话
            lesseeAddress: "", //承租人地址
            circulationArea: "", //流转面积
            circulationPrice: "", //流转价格
            housingStructure: "", //房屋结构
            currentSituationDescription: "", //现状描述
            circulationPeriod: "", //流转期限
            creditCode: "", //信用代码
            circulationMode: "", //流转方式
            obligeeImgFront: "", //权利人证件正面
            lesseeImgFront: "", //承租人证件正面
            obligeeImgBack: "", //权利人证件背面
            lesseeImgBack: "" //承租人证件背面
          }],
          currentPage: 1,
          pageSize: 10,
          total: 0
        },
        formData: {
          id: "",
          obligee: "", //权利人
          ownership: "", //权属
          createTime: "", //创建日期
          updateTime: "", //修改日期
          circulationType: "", //流转类型
          state: "", //审核状态
          circulationCode: "", //流转编号
          organizationName: "", //组织名称
          obligeeIdCard: "", //权利人身份证号码
          obligeePhone: "", //权利人电话
          obligeeAddress: "", //权利人地址
          common: "", //备注
          contractCode: "", //合同编号
          lessee: "", //承租人
          lesseeIdCard: "", //承租人身份证号码
          lesseePhone: "", //承租人电话
          lesseeAddress: "", //承租人地址
          circulationArea: "", //流转面积
          circulationPrice: "", //流转价格
          housingStructure: "", //房屋结构
          currentSituationDescription: "", //现状描述
          circulationPeriod: "", //流转期限
          creditCode: "", //信用代码
          circulationMode: "", //流转方式
          obligeeImgFront: "", //权利人证件正面
          lesseeImgFront: "", //承租人证件正面
          obligeeImgBack: "", //权利人证件背面
          lesseeImgBack: "" //承租人证件背面
        }
      }
    },
    created: function () {
      this.getAllPropertyre(); //获取所有数据列表
    },
    methods: {
      //格式化时间
      timeFormart(row) {
        var date = new Date(row.createTime); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
        var Y = date.getFullYear() + '-';
        var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
        var D = date.getDate() + ' ';
        var h = date.getHours() + ':';
        var m = date.getMinutes() + ':';
        var s = date.getSeconds();
        return Y + M + D + " " + h + m + s;
      },
      changePageSize(val) {
        this.tableData.pageSize = val;
        this.getAllPropertyre();
      },
      changeCurrentPage(val) {
        this.tableData.currentPage = val;
        this.getAllPropertyre();
      },
      prevPage(val) {
        this.tableData.currentPage = val;
        this.getAllPropertyre();
      },
      nextPage(val) {
        this.tableData.currentPage = val;
        this.getAllPropertyre();
      },
      //获取所有数据列表
      getAllPropertyre() {
        getPropertyreExitStateApi(this.tableData)
          .then(res => {
            this.tableData.data = res.data.data.items;
            this.tableData.total = res.data.data.total;
          })
      },
      //权属
      ownershipFormart(row) {
        if (row.ownership == 0) {
          return "未知"
        } else if (row.ownership == 1) {
          return "土地所有权"
        } else if (row.ownership == 2) {
          return "国有建设用地使用权"
        } else if (row.ownership == 3) {
          return "宅基地使用权"
        } else if (row.ownership == 4) {
          return "集体建设用地使用权"
        } else if (row.ownership == 5) {
          return "土地承包经营权"
        } else if (row.ownership == 6) {
          return "林地使用权"
        } else if (row.ownership == 7) {
          return "海域使用权"
        } else if (row.ownership == 8) {
          return "无居民海岛使用权"
        } else if (row.ownership == 9) {
          return "房屋所有权"
        } else if (row.ownership == 10) {
          return "构筑物所有权"
        }
      },
      //登记类型
      registrationTypeFormart(row) {
        if (row.circulationType == 0) {
          return "未知"
        } else if (row.circulationType == 1) {
          return "首次登记"
        } else if (row.circulationType == 2) {
          return "转移登记"
        } else if (row.circulationType == 3) {
          return "变更登记"
        } else if (row.circulationType == 4) {
          return "注销登记"
        } else if (row.circulationType == 5) {
          return "更正登记"
        } else if (row.circulationType == 6) {
          return "异议登记"
        } else if (row.circulationType == 7) {
          return "预告登记"
        } else if (row.circulationType == 8) {
          return "查封登记"
        } else if (row.circulationType == 9) {
          return "其他"
        }
      },
      //审核状态
      stateFormart(row) {
        if (row.state == 0) {
          return "待审核"
        } else if (row.state == 1) {
          return "通过审核"
        } else if (row.state == 2) {
          return "未审核"
        } else if (row.state == 3) {
          return "驳回审核"
        }
      },
      //查看
      showData(index, row) {
        //this.editVisible=true;
        this.$router.push({
          path: "/showPropertyreTable",
          query: row
        });
      },
      //模糊查询
      submitProperForm(formData) {
        this.$refs[formData].validate(valid => {
          if (valid) {
            selectLikeProperStateApi(this.formData)
              .then(res => {
                this.tableData.data = res.data.data.items;
                this.tableData.total = res.data.data.total;
                this.$message({
                  showClose: true,
                  message: "搜索成功",
                  type: "success"
                });
                //this.resetForm(formData);
              })
              .catch(error => {
                this.$message({
                  showClose: true,
                  message: error.data.respondMessage,
                  type: "error"
                });
              });
          } else {
            return false;
          }
        });
      },
      // 清空表单选项
      resetProperForm(formData) {
        this.$refs[formData].resetFields();
        this.getAllPropertyre();
      }
    }
  }
</script>
<style>
  .record .el-form--inline .el-form-item__label {
    width: 200px;
  }

  .record .el-form--inline .el-form-item__label {
    font-size: 15px;
  }

  .demo-table-expand {
    font-size: 0;
  }

  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }

  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 100%;
  }
</style>